<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li><a href="#">Special Page</a>
    </li>
    <li>Time Line</li>
</ol>

<div class="row">
    <!--   TIMELINE -->
    <div class="col-lg-12">

        <div class="box bg-transparent">
            <div class="box-body no-padding">
                <ul class="timeline">


                    <!-- timeline item -->
                    <li>
                        <i class="fa fontello-sunrise bg-yellow"></i>
                        <span>
                            <strong>Post&nbsp;&nbsp;</strong>from<i> &nbsp;&nbsp;Jennifer Paijo</i>
                            <small>25/6/2014</small>
                        </span>
                        <div class="timeline-item bg-white">
                            <h3 style="padding: 15px 20px 0 20px;" class="timeline-header text-white  no-border">
                                <span class="text-gray"><i class="fontello-pen"></i>&nbsp;&nbsp;My Post</span>
                                <span class="text-white pull-right fa fa-cogs"></span>
                            </h3>

                            <div class="timeline-body">
                                Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo...
                            </div>
                            <div class='timeline-footer'>
                                <a class="btn bg-green btn-xs">Read more</a>
                                <a class="btn btn-danger btn-xs">Delete</a>
                            </div>
                        </div>
                    </li>
                    <!-- END timeline item -->


                    <!-- timeline item -->
                    <li>
                        <i class="fa fontello-sun-1 bg-yellow"></i>
                        <span>
                            <strong>Tweet&nbsp;&nbsp;</strong>from<i> &nbsp;&nbsp;Agus Anak Baik</i>
                            <small>23/6/2014</small>
                        </span>
                        <div class="timeline-item bg-white">
                            <h3 style="padding: 15px 20px 0 20px;" class="timeline-header text-white  no-border">
                                <span class="text-gray"><i class="fa fa-twitter"></i>&nbsp;&nbsp;My Tweet</span>
                                <span class="text-white pull-right fa fa-cogs"></span>
                            </h3>

                            <div class="timeline-body">
                                Take me to your leader! Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!
                            </div>
                            <div class='timeline-footer'>
                                <a class="btn bg-aqua btn-flat btn-xs">View comment</a>
                            </div>
                        </div>
                    </li>
                    <!-- END timeline item -->

                    <!-- timeline item -->
                    <li>
                        <i class="fa fontello-cloud-sun-1 bg-aqua"></i>
                        <span>
                            <strong>New Frieds Added&nbsp;&nbsp;</strong>from<i> &nbsp;&nbsp;Bruce Wyne</i>
                            <small>25/6/2014</small>
                        </span>
                        <div class="timeline-item bg-white">
                            <h3 style="padding: 15px 20px 0 20px;" class="timeline-header text-white  no-border">
                                <span class="text-gray"><i class="fontello-users-outline"></i>&nbsp;&nbsp;Friends List</span>
                                <span class="text-white pull-right fa fa-cogs"></span>
                            </h3>

                            <div class="timeline-body">
                                <img src="http://api.randomuser.me/portraits/thumb/men/45.jpg" alt="..." class="img-circle">
                                <img src="http://api.randomuser.me/portraits/thumb/women/46.jpg" alt="..." class="margin img-circle">
                                <img src="http://api.randomuser.me/portraits/thumb/men/47.jpg" alt="..." class="margin img-circle">
                                <img src="http://api.randomuser.me/portraits/thumb/women/48.jpg" alt="..." class="margin img-circle">
                            </div>
                        </div>
                    </li>
                    <!-- END timeline item -->

                    <!-- timeline item -->
                    <li>
                        <i class="fa  fontello-rain-1 bg-green"></i>
                        <span>
                            <strong>News&nbsp;&nbsp;</strong>from<i> &nbsp;&nbsp;Jennifer Paijo</i>
                            <small>25/6/2014</small>
                        </span>
                        <div class="timeline-item bg-white">
                            <h3 style="padding: 15px 20px 0 20px;" class="timeline-header text-white  no-border">
                                <span class="text-gray"><i class="fontello-news"></i>&nbsp;&nbsp;News Article</span>
                                <span class="text-white pull-right fa fa-cogs"></span>
                            </h3>

                            <div class="timeline-body" style="padding:20px">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus vitae neque eu mattis. Donec sit amet dui lorem. Vestibulum rhoncus mi non quam fringilla, ut rhoncus dolor pellentesque. Sed hendrerit augue sed elit fringilla euismod. Integer nec rhoncus nisl. Pellentesque vel commodo massa, a luctus ligula. Suspendisse mattis blandit dolor. Maecenas ac sollicitudin tellus, a scelerisque lectus. Ut in mi at justo suscipit pretium. Mauris eu ultrices nulla. Phasellus consequat erat odio, vitae dignissim ante fermentum nec.</p>

                                <p>Donec sit amet iaculis massa. Proin vitae venenatis justo, nec scelerisque lectus. Fusce viverra hendrerit lacinia. Morbi a eros quis dui pharetra consequat. Vestibulum ut feugiat leo. Duis ac pellentesque libero. Suspendisse sagittis ligula sagittis, ultrices ipsum non, blandit neque. Suspendisse rutrum imperdiet purus ut dignissim. Nam adipiscing elit volutpat aliquam dignissim. Integer ac elementum turpis. Nam velit sem, hendrerit vitae ante venenatis, pulvinar tempor metus. Curabitur posuere pellentesque varius. Nam cursus elementum purus eget varius. Pellentesque lobortis commodo dui, id venenatis sem sollicitudin a. Nulla semper dictum lorem vitae tempor. Suspendisse a sapien quis tellus pretium tincidunt vitae ac nunc.</p>

                                <p>Etiam suscipit mollis lacinia. Nam vitae neque ac nulla vulputate aliquam. Vivamus posuere dolor nec velit malesuada, sed egestas libero pharetra. Nam faucibus mi nec ligula eleifend pellentesque. In hac habitasse platea dictumst. Etiam lacinia sodales vestibulum. Vestibulum eleifend ante ac interdum imperdiet. Donec ante enim, pharetra a nulla lacinia, congue feugiat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus urna magna, consequat id convallis eget, fringilla vitae libero. Proin convallis odio et nunc vehicula iaculis. Sed non semper nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem augue, mollis ut eros vel, semper pharetra est. Nullam fringilla dignissim elementum. Nullam ullamcorper nibh et velit adipiscing viverra.</p>
                            </div>
                            <div class='timeline-footer'>
                                <a class="btn bg-green  btn-xs">View comment</a>
                            </div>
                        </div>
                    </li>
                    <!-- END timeline item -->
                    <!-- timeline item -->
                    <li>
                        <i class="fa fontello-moon-inv bg-black"></i>
                        <span>
                            <strong>Table&nbsp;&nbsp;</strong>from<i> &nbsp;&nbsp;Jennifer Paijo</i>
                            <small>25/6/2014</small>
                        </span>
                        <div class="timeline-item bg-white">
                            <h3 style="padding: 15px 20px 0 20px;" class="timeline-header text-white  no-border">
                                <span class="text-gray"><i class="fontello-doc-text"></i>&nbsp;&nbsp;Table Content</span>
                                <span class="text-white pull-right fa fa-cogs"></span>
                            </h3>

                            <div class="timeline-body">
                                <table class="table table-bordered table-striped cf">
                                    <thead class="cf">
                                        <tr>
                                            <th>Code</th>
                                            <th>Company</th>
                                            <th class="numeric">Price</th>
                                            <th class="numeric">Change</th>
                                            <th class="numeric">Change %</th>
                                            <th class="numeric">Open</th>
                                            <th class="numeric">High</th>
                                            <th class="numeric">Low</th>
                                            <th class="numeric">Volume</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>AAC</td>
                                            <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                                            <td class="numeric">$1.38</td>
                                            <td class="numeric">-0.01</td>
                                            <td class="numeric">-0.36%</td>
                                            <td class="numeric">$1.39</td>
                                            <td class="numeric">$1.39</td>
                                            <td class="numeric">$1.38</td>
                                            <td class="numeric">9,395</td>
                                        </tr>
                                        <tr>
                                            <td>AAD</td>
                                            <td>ARDENT LEISURE GROUP</td>
                                            <td class="numeric">$1.15</td>
                                            <td class="numeric">+0.02</td>
                                            <td class="numeric">1.32%</td>
                                            <td class="numeric">$1.14</td>
                                            <td class="numeric">$1.15</td>
                                            <td class="numeric">$1.13</td>
                                            <td class="numeric">56,431</td>
                                        </tr>
                                        <tr>
                                            <td>AAX</td>
                                            <td>AUSENCO LIMITED</td>
                                            <td class="numeric">$4.00</td>
                                            <td class="numeric">-0.04</td>
                                            <td class="numeric">-0.99%</td>
                                            <td class="numeric">$4.01</td>
                                            <td class="numeric">$4.05</td>
                                            <td class="numeric">$4.00</td>
                                            <td class="numeric">90,641</td>
                                        </tr>
                                        <tr>
                                            <td>ABC</td>
                                            <td>ADELAIDE BRIGHTON LIMITED</td>
                                            <td class="numeric">$3.00</td>
                                            <td class="numeric">+0.06</td>
                                            <td class="numeric">2.04%</td>
                                            <td class="numeric">$2.98</td>
                                            <td class="numeric">$3.00</td>
                                            <td class="numeric">$2.96</td>
                                            <td class="numeric">862,518</td>
                                        </tr>
                                        <tr>
                                            <td>ABP</td>
                                            <td>ABACUS PROPERTY GROUP</td>
                                            <td class="numeric">$1.91</td>
                                            <td class="numeric">0.00</td>
                                            <td class="numeric">0.00%</td>
                                            <td class="numeric">$1.92</td>
                                            <td class="numeric">$1.93</td>
                                            <td class="numeric">$1.90</td>
                                            <td class="numeric">595,701</td>
                                        </tr>
                                        <tr>
                                            <td>ABY</td>
                                            <td>ADITYA BIRLA MINERALS LIMITED</td>
                                            <td class="numeric">$0.77</td>
                                            <td class="numeric">+0.02</td>
                                            <td class="numeric">2.00%</td>
                                            <td class="numeric">$0.76</td>
                                            <td class="numeric">$0.77</td>
                                            <td class="numeric">$0.76</td>
                                            <td class="numeric">54,567</td>
                                        </tr>
                                        <tr>
                                            <td>ACR</td>
                                            <td>ACRUX LIMITED</td>
                                            <td class="numeric">$3.71</td>
                                            <td class="numeric">+0.01</td>
                                            <td class="numeric">0.14%</td>
                                            <td class="numeric">$3.70</td>
                                            <td class="numeric">$3.72</td>
                                            <td class="numeric">$3.68</td>
                                            <td class="numeric">191,373</td>
                                        </tr>
                                        <tr>
                                            <td>ADU</td>
                                            <td>ADAMUS RESOURCES LIMITED</td>
                                            <td class="numeric">$0.72</td>
                                            <td class="numeric">0.00</td>
                                            <td class="numeric">0.00%</td>
                                            <td class="numeric">$0.73</td>
                                            <td class="numeric">$0.74</td>
                                            <td class="numeric">$0.72</td>
                                            <td class="numeric">8,602,291</td>
                                        </tr>
                                        <tr>
                                            <td>AGG</td>
                                            <td>ANGLOGOLD ASHANTI LIMITED</td>
                                            <td class="numeric">$7.81</td>
                                            <td class="numeric">-0.22</td>
                                            <td class="numeric">-2.74%</td>
                                            <td class="numeric">$7.82</td>
                                            <td class="numeric">$7.82</td>
                                            <td class="numeric">$7.81</td>
                                            <td class="numeric">148</td>
                                        </tr>
                                        <tr>
                                            <td>AGK</td>
                                            <td>AGL ENERGY LIMITED</td>
                                            <td class="numeric">$13.82</td>
                                            <td class="numeric">+0.02</td>
                                            <td class="numeric">0.14%</td>
                                            <td class="numeric">$13.83</td>
                                            <td class="numeric">$13.83</td>
                                            <td class="numeric">$13.67</td>
                                            <td class="numeric">846,403</td>
                                        </tr>
                                        <tr>
                                            <td>AGO</td>
                                            <td>ATLAS IRON LIMITED</td>
                                            <td class="numeric">$3.17</td>
                                            <td class="numeric">-0.02</td>
                                            <td class="numeric">-0.47%</td>
                                            <td class="numeric">$3.11</td>
                                            <td class="numeric">$3.22</td>
                                            <td class="numeric">$3.10</td>
                                            <td class="numeric">5,416,303</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class='timeline-footer'>
                                <a class="btn bg-green  btn-xs">View comment</a>
                            </div>
                        </div>
                    </li>
                    <!-- END timeline item -->

                    <li>
                        <i class="fa  fontello-moon-inv bg-balck"></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--   ./TIMELINE -->
